<script setup lang="ts">
import { useUserInfoStore } from '@/stores/modules/userInfo'
import { useRouter } from 'vue-router'

const userInfoStore = useUserInfoStore()

const router = useRouter()
const handleLoginOut = () => {
  userInfoStore.userLoginOut()
  router.push('/login')
}
</script>

<template>
  <el-dropdown placement="bottom">
    <div class="userinfo">
      <el-avatar :src="userInfoStore.avatar" />
      <span>{{ userInfoStore.username }}</span>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="handleLoginOut">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped lang="scss">
.userinfo {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 10px;
  gap: 10px;
}
</style>
